<template>
    <div class="select-system-content">
        <div class="logo-title">
            <img src="@/assets/image/logo.png"/>
            <p>医院数据质量分析平台</p>
        </div>
        <div class="select-box">
            <div>
                <img src="@/assets/image/MR.png" @click="selectSystem('MR')"/>
            </div>
            <div>
                <img src="@/assets/image/DRG.png" @click="selectSystem('DRG')"/>
            </div>
            <div>
                <img src="@/assets/image/system.png" @click="selectSystem('system')"/>
            </div>
        </div>
        <div class="copy-right" :class="{'is-short': isShort}">
            <img src="@/assets/image/cloud.png"/>
            <p>康卫通信息科技成都有限公司版权所有</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'index',
        data () {
            return {
                // 是小屏，高度小于710
                isShort: false
            }
        },
        created () {
            this.isShort = document.body.clientHeight < 710
            window.onresize = () => {
                this.isShort = document.body.clientHeight < 710
            }
        },
        methods: {
            /**
             * 选择系统
             * @param val 选择的系统
             */
            selectSystem (val) {
                switch (val) {
                case 'MR':
                    window.open('/mrqc')
                    break
                case 'DRG':
                    window.open('/mrdrg')
                    break
                case 'system':
                    window.open('/mrms')
                    break
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .select-system-content {
        height: 100%;
        background: #EAEEF3;
        position: relative;
        .logo-title {
            padding-top: 20px;
            margin-bottom: 180px;
            img {
                display: block;
                width: 180px;
                margin: 0 auto 20px;
            }
            p {
                margin: 0 auto;
                font-size: 28px;
                color: #333;
                text-align: center;
                font-weight: bold;
            }
        }
        .select-box {
            display: flex;
            justify-content: center;
            align-items: center;
            div {
                width: 410px;
                height: 250px;
                position: relative;
                img {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    display: block;
                    width: 410px;
                    cursor: pointer;
                    &:hover {
                        -webkit-transform: translate(-50%, -50%) scale(1.1);
                        transform: translate(-50%, -50%) scale(1.1);
                    }
                }
            }
        }
        .copy-right {
            position: absolute;
            bottom: 0;
            width: 100%;
            img {
                display: block;
                width: 1600/1920*100%;
                margin: 0 auto;
            }
            p {
                position: absolute;
                width: 100%;
                margin: 0;
                bottom: 10px;
                text-align: center;
                font-size: 14px;
                color: #7D8287;
                line-height: 18px;
            }
            &.is-short {
                position: relative;
                bottom: 0;
                margin-top: 42px;
            }
        }
    }
</style>
